// src/components/thread-bar.tsx
import React from 'react';
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {formatDistanceToNow} from "date-fns";
import {ChevronRight} from "lucide-react";

interface Props {
    count?: number
    image?: string
    name?: string
    timestamp?: string
    onClick?: () => void
}

const ThreadBar = ({
                       count, image, name = 'Member', timestamp, onClick
                   }: Props) => {
    // 有这些属性的本身是其他信息的子集才对...
    if (!count || !timestamp) return null;
    // if (!count) return null;

    return (
        <button
            onClick={onClick}
            className={`p-1 rounded-md hover:bg-white border border-transparent hover:border-border
            flex items-center justify-start group/thread-bar transition max-w-[600px]`}
        >
            <div className={`flex items-center gap-2 overflow-hidden`}>
                <Avatar className={`size-6 shrink-0 rounded-md`}>
                    <AvatarImage className={`rounded-md`} src={image}/>
                    <AvatarFallback className={`bg-sky-500 text-white rounded-md`}>
                        M
                    </AvatarFallback>
                </Avatar>
                <span className={`text-xs text-sky-700 hover:underline font-bold truncate`}>
                    {count} {count > 1 ? 'replies' : 'reply'}
                </span>
                <span className={`text-xs text-muted-foreground truncate group-hover/thread-bar:hidden block`}>
                    Last reply {formatDistanceToNow(timestamp, {addSuffix: true})}
                </span>
                <span className={`text-xs text-muted-foreground truncate group-hover/thread-bar:block hidden`}>
                    View thread
                </span>
            </div>
            {/*group-hover/thread-bar group/thread-bar的元素hover时触发*/}
            <ChevronRight className={`size-4 text-muted-foreground ml-auto opacity-0 
            group-hover/thread-bar:opacity-100 transition shrink-0`}/>
        </button>
    );
};

export default ThreadBar;